<template>
	<view class="box">
		<!-- 上门看过 -->
		<!-- <view class="tou top" :style="'padding-top:' + statusBarHeight1 + 'px'">
			<image @click="fanhui" class="image1" src="https://pic.bangbangtongcheng.com/static/fanhui_bai.png" />
			上门看过
			<p class="p2" @click="guanLi">{{ text }}</p>
		</view> -->
		<view class="tou fixed" :style="'padding-top:' + statusBarHeight1 + 'px'">
      <view class="tou heads ">
        <view class="" style="width:90rpx">
          <image class="backs" src="https://pic.bangbangtongcheng.com/static/fanhui_bai.png" @click="fanhui" />
        </view>
        <view class="toptitles">
          上门看过
        </view>
        <view class="remove" @click="guanLi">
          {{ text }}
        </view>
      </view>
		</view>
    <view class="tou pos" :style="'padding-top:' + statusBarHeight1 + 'px'"></view>
		<view class="smkgSJTab" v-if="(userInfo.isAgent == 1 && userInfo.businessType == 1 && userInfo.shopType != 2)||(userInfo.isShop == 1 && userInfo.businessType == 2 && (userInfo.shopType != 3||userInfo.shopType != 4)) || (userInfo.isAgent == 1 && userInfo.businessType != 1)">
			<view class="oneLevel" v-if="userInfo.shopType != 4 && userInfo.shopType != 3">
				<view class="item" :class="oneLevelTab ==1 ? 'item active':'item'" @click="oneLevel(1)">
					带客看过
					<image class="image" src="https://pic.bangbangtongcheng.com/static/xuanzhong.png" mode="widthFix"
						v-if="oneLevelTab == 1" />
				</view>
				<view class="item" :class="oneLevelTab ==2 ? 'item active':'item'" @click="oneLevel(2)">
					我看过谁
					<image class="image" src="https://pic.bangbangtongcheng.com/static/xuanzhong.png" mode="widthFix"
						v-if="oneLevelTab == 2" />
				</view>
			</view>
			<view class="twoLevel" v-if="oneLevelTab == 2">
				<view :class="tabChage==1?'active item':'item '" @click="tabClick(1)">
					房产
				</view>
				<view :class="tabChage==2?'active item':'item '" @click="tabClick(2)">
					汽车
				</view>
				<view :class="tabChage==3?'active item':' item'" @click="tabClick(3)">
					招聘
				</view>
			</view>
		</view>
		<view class="smkgTab" v-else>
			<view :class="tabChage==1?'active':''" @click="tabClick(1)">
				房产
			</view>
			<view :class="tabChage==2?'active':''" @click="tabClick(2)">
				汽车
			</view>
			<view :class="tabChage==3?'active':''" @click="tabClick(3)">
				招聘
			</view>
		</view>
		<!-- #ifdef H5 || APP-PLUS -->
		<scroll-view scroll-y :style="'height:calc( 100vh - ' + statusBarHeight + `px - 88rpx - ${userInfo.shopType == 4 ? '90rpx' : '190rpx'})`"
			@scrolltolower="down" refresher-background="#f5f5f5">
		<!-- #endif -->
		<!-- #ifdef MP -->
		<scroll-view scroll-y :style="'height:calc( 100vh - ' +statusBarHeight +`px - 88rpx - 54rpx - ${userInfo.shopType == 4 ? '90rpx' : '190rpx'})`"
			@scrolltolower="down" refresher-background="#f5f5f5">
		<!-- #endif -->
			<view class="list">
				<template v-if="tabChage==3">
					<view class="vacancy" v-for="(item, index) in Recommend" :key="index" @click="zpdetails(item)">
						<radio style="display: flex;align-items: center;margin-right: 20rpx;" color="#64B6A8" v-if="width == 290" :data-index='index'
							:checked='item.active' @click.stop="changeRadio"></radio>
						<view style="flex: 1;">
							<view class="vehicleRecom">
								<span class="tagLabel">{{item.recruitmentType == 1?'全职':'兼职'}}</span>
								<span>{{item.title}}</span>
							</view>
							<view class="vacancy_center">
								<view class="vacancy_status">
									<span>{{item.region}}</span>
									<span>{{item.positionCategory}}</span>
								</view>
								<view class="vacancy_price" v-if="item.recruitmentType == 1">{{item.salaryRange == '面议'?'面议':item.salaryRange+'元'}}</view>
								<view class="vacancy_price" v-else>{{item.salaryRange.split(',').join('')}}&emsp;{{item.settlementMethod}}</view>
							</view>
							<view class="vacancy_biaoq"  v-if = 'item.fringeBenefits'>
								<view class="vacancy_label">
									<view class="shade">
										
									</view>
									<view class="label" v-for="(i,j) in item.fringeBenefits.split(',')" :key="j">{{i}}</view>
								</view>
								<view class="gend" v-if="item.fringeBenefits.split(',').length>4">
									更多>
								</view>
							</view>
							<view class="personalInformation">
								<view class="personalInformation_left">
									<view class="GR">
										<image class="personalInformation_image" v-if="item.userInformation.image" :src="item.userInformation.image" mode=""></image>
										<image class="personalInformation_image" v-else src="https://pic.bangbangtongcheng.com/static/my/header.png" mode=""></image>
										<span class="name">{{item.userInformation.nikeName ? item.userInformation.nikeName : '未命名用户'}}</span>
									</view>
									<view class="GS" v-if="item.userInformation.enterpriseRecruitmentStatus">
										<view class="personalInformation_image"></view>
										<span class="corporation">{{item.enterpriseName}}</span>
									</view>
								</view>
								<view class="personalInformation_right">
									<span class="personalInformation_Time">{{$Time.getDateDiff(item.createDate)}}</span>
									<span class="personalInformation_distance" v-if="item.distance">{{item.distance}}km</span>
								</view>
							</view>
						</view>
					</view>
				</template>
				<template v-else-if="tabChage==2">
					<view class="li" v-for="(item, index) in Recommend" :key="index" >
						<radio style="display: flex;align-items: center;margin-right: 20rpx;" color="#64B6A8" v-if="width == 290" :data-index='index'
							:checked='item.active' @click="changeRadio"></radio>
						<!-- <view class="xian" :style="'width: ' + (width + 324) + 'rpx'"></view> -->
						<image class="img3" @click="details(item.id)" mode="aspectFit"
							:src="item.vehicleCoverPicture" />
						<view class="li_2" @click="details(item.id)" :style="'width: ' + width + 'rpx'">
							<view class="vehicleRecom">
								<span class="tagLabel">{{item.vehicleType==1?'到店新车':(item.vehicleType==2?'二手车':'在售车系')}}</span>
								<text>{{item.title}}</text>
                <!-- <span v-if="item.vehicleType==2">{{item.vehicleBrandModel.split('|')[0] + ' '}} {{item.vehicleBrandModel.split('|')[1]?item.vehicleBrandModel.split('|')[1] + "/":"/"}} {{item.mileage<10000?item.mileage+"公里/":(item.mileage/10000).toFixed(1)+"万公里/"}} {{item.licensingTimeYear}}</span>
								<span v-else>{{item.vehicleBrandModel.split('|')[0]+ " "}} {{item.vehicleBrandModel.split('|')[1]?item.vehicleBrandModel.split('|')[1] + "/":"/"}} {{item.model?item.model+'/':""}} {{item.bodyStructureDoors+"门"+item.bodyStructureSeat+"座"+item.bodyStructureVehicle+"车"}}</span> -->
							</view>
							<view class="price" v-if="item.vehicleType!=3">
								{{item.price}}万
							</view>
							<view class="price" v-else>
								{{item.intervalPrice}}万
							</view>
						</view>
					</view>
				</template>
				<template v-else>
					<view class="liss" v-for="(item, index) in Recommend" :key="index" @click="details(item.id)">
						<radio style="margin-right: 20rpx;align-items: center;" color="#64B6A8" v-if="width == 290" :data-index='index'
							:checked='item.active' @click.stop="changeRadio"></radio>
						<image mode="aspectFit" :src="item.displayDiagram?item.displayDiagram:item.houseImage.split('|')[0]" />
						<view class="li_1" :style="'width: ' + width + 'rpx'">
							<view class="tit">
								<span class="tagLabel">{{item.transaction_type ==1?'出租房':(item.new_old ==1?'新房':'二手房')}}</span>
								{{ item.title }}
							</view>
							<view class="neirong_1">
								<view class="neir_css">{{ item.region }}</view>
								<view class="neir_css">{{ item.cell_name || ''}}</view>
							</view>
							<view class="neirong_1">
								<view class="neir_css">{{ item.FLOOR?item.FLOOR.split('|')[0]+"层/共"+item.FLOOR.split('|')[1]+"层" :''}}</view>
								<view class="neir_css">{{item.house_type || ''}}</view>
							</view>
							<view class="neirong_1">
							  <view class="price neir_css" v-if="item.transaction_type == 2">{{ item.price }}万</view>
							  <view class="price neir_css" v-if="item.transaction_type == 1 && item.price <= 10000">{{ item.price }}元</view>
							  <view class="price neir_css" v-if="item.transaction_type == 1 && item.price > 10000">{{ item.price/10000 }}万元</view>
							  <view class="neir_css" style>{{ item.AREA || item.area }}㎡</view>
							</view>
						</view>
					</view>
				</template>
				<view v-if="Recommend.length == 0" class="none">
					<image src="https://pic.bangbangtongcheng.com/static/none.png" mode="widthFix" />
					<view>没有更多数据了</view>
				</view>
				<view class="down" v-show="Recommend.length != 0 && !downStatus">
					没有更多了
				</view>
			</view>
		</scroll-view>
		<view class="zbc" v-if="smkg" style="z-index: 11;">
			<view class="shangjia">
				<view class="li_1">确定要删除选中的上门看过？</view>
				<view class="li_2" @click="guan()">取消</view>
				<view class="li_3" @click="del()">确定</view>
			</view>
		</view>
		<uniBall></uniBall>
	</view>
</template>
<script>
import { mapGetters } from "vuex";
let statusBarHeight;
//#ifdef H5
import wxshare from "../../utils/index.js";
statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 10;
//#endif
// #ifdef APP-PLUS
statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 10;
//  #endif
// #ifdef MP-WEIXIN
statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 5;
//  #endif
export default {
  data() {
    return {
      statusBarHeight,
      width: 366,
      text: "管理",
      scrollLeft: 0,
      pageSize: 10,
      pageNo: 1,
      trigger: false,
      downStatus: true,
      upStatus: true,
      userInfo: uni.getStorageSync("Pduser"),
      imgUrl: this.$imgSrc,
      Recommend: [],
      activeData: [],
      tabChage: 1,
      smkg: false,
      oneLevelTab: 2,
    };
  },
  computed: {
    ...mapGetters(["statusBarHeight1", "userinfo"]),
  },
  onLoad(option) {
    // this.userInfo.shopType = 4
    if (option.index) {
      this.tabChage = option.index;
    } else {
      // if (this.userInfo.businessType == 1) {
      //   this.tabChage = 1;
      // } else if (this.userInfo.businessType == 2) {
      //   this.tabChage = 2;
      // }
      //  else {
      //   this.tabChage = 3;
      // }
    }
    this.getFy();
    /* #ifdef H5 */
    this.jinzhi();
    /* #endif */
  },
  async onPullDownRefresh() {
    this.Recommend = [];
    this.pageNo = 1;
    this.downStatus = true;
    if (this.upStatus) {
      this.trigger = true;
      await this.getFy();
    }
  },
  filters: {
    nums(val) {
      return val.toFixed(2);
    },
  },
  methods: {
    oneLevel(index) {
      this.oneLevelTab = index;
      if (index == 1) {
        if (this.userInfo.businessType == 1) {
          this.tabChage = 1;
        } else if (this.userInfo.businessType == 2) {
          this.tabChage = 2;
        } else {
          this.tabChage = 3;
        }
      }
      this.Recommend = [];
      this.pageNo = 1;
      this.downStatus = true;
      this.getFy();
    },
    tabClick(index) {
      this.tabChage = index;
      this.Recommend = [];
      this.pageNo = 1;
      this.downStatus = true;
      this.getFy();
    },
    guanLi() {
      console.log(123);
      if (this.text == "管理") {
        this.text = "删除";
        this.width = 290;
      } else {
        if (this.activeData.length == 0) {
          this.text = "管理";
          this.width = 366;
        } else {
          // 删除上门看过
          this.smkg = true;
        }
      }
    },
    guan() {
      this.smkg = false;
      this.text = "管理";
      this.width = 366;
    },
    del() {
      if (this.tabChage == 3) {
        this.$myRequest
          .post("/api/mobile/personnelOwner/removeVisitedLook", {
            ids: this.activeData.join(","),
          })
          .then((res) => {
            uni.showToast({
              title: res.msg,
              icon: "none",
              mask: true,
            });
            setTimeout(() => {
              this.guan();
              this.Recommend = [];
              this.pageNo = 1;
              this.downStatus = true;
              this.getFy();
            }, 500);
          });
      } else if (this.tabChage == 2) {
        this.$myRequest
          .post("/api/mobile/vehicleOwner/removeVisited", {
            ids: this.activeData.join(","),
          })
          .then((res) => {
            uni.showToast({
              title: res.msg,
              icon: "none",
              mask: true,
            });
            setTimeout(() => {
              this.guan();
              this.activeData = "";
              this.Recommend = [];
              this.pageNo = 1;
              this.downStatus = true;
              this.getFy();
            }, 500);
          });
      } else {
        this.$myRequest
          .post("/mob/iteration/removeHouseVisited", {
            ids: this.activeData.join(","),
          })
          .then((res) => {
            uni.showToast({
              title: res.msg,
              icon: "none",
              mask: true,
            });
            setTimeout(() => {
              this.guan();
              this.Recommend = [];
              this.pageNo = 1;
              this.downStatus = true;
              this.getFy();
            }, 500);
          });
      }
    },
    jinzhi() {
      let _this = this;
      let param = window.location.href.split("#")[0];
      uni.request({
        method: "post",
        data: {
          url: param,
        },
        header: {
          "content-type": "application/x-www-form-urlencoded",
        },
        url: "https://www.bangbangtongcheng.com/conven//mob/login/getJsTicket.do",
        success(re) {
          _this.jinzhifx(re.data);
        },
      });
    },
    jinzhifx(data) {
      wxshare.config({
        debug: false, //是否打开调试
        appId: data.appId, // 公众号的唯一标识
        timestamp: data.timestamp, // 生成签名的时间戳
        nonceStr: data.nonce, // ，生成签名的随机串
        signature: data.signature, // 签名
        jsApiList: ["hideMenuItems"],
      });
      // 禁止分享
      wxshare.hideMenuItems({
        // 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
        menuList: [
          "menuItem:share:appMessage",
          "menuItem:share:timeline",
          "menuItem:share:timeline",
          "menuItem:share:qq",
          "menuItem:favorite",
          "menuItem:share:QZone",
          "menuItem:openWithSafari",
        ],
      });
    },
    changeRadio(e) {
      let that = this;
      let index = e.currentTarget.dataset.index;
      if (this.tabChage == 3) {
        if (that.Recommend[index].active) {
          that.Recommend[index].active = !that.Recommend[index].active;
          var index0 = this.activeData.findIndex((item) => {
            if (that.Recommend[index].visitedLook.id == item) {
              return true;
            }
          });
          this.activeData.splice(index0, 1);
        } else {
          that.Recommend.forEach((el, index1) => {
            if (index1 == index) {
              that.Recommend[index1].active = !that.Recommend[index1].active;
              that.activeData.push(that.Recommend[index1].visitedLook.id);
            } else {
            }
          });
        }
      } else {
        if (that.Recommend[index].active) {
          that.Recommend[index].active = !that.Recommend[index].active;
          var index0 = this.activeData.findIndex((item) => {
            if (that.Recommend[index].visited.id == item) {
              return true;
            }
          });
          this.activeData.splice(index0, 1);
        } else {
          that.Recommend.forEach((el, index1) => {
            if (index1 == index) {
              that.Recommend[index1].active = !that.Recommend[index1].active;
              that.activeData.push(that.Recommend[index1].visited.id);
            } else {
            }
          });
        }
      }
    },
    getFy() {
      let that = this;
      this.$myRequest.cancel();
      this.upStatus = false;
      if (this.tabChage == 3) {
        this.$myRequest
          .get("/api/mobile/personnelOwner/getMyVisitedLookHistoryList", {
            pageSize: this.pageSize,
            pageNo: this.pageNo,
            userId: this.userInfo.id,
            visitType: 1,
            wetherShowCustomer: this.oneLevelTab == 1 ? "1" : "0",
          })
          .then((res) => {
            if (!res.visitedHistory.pageList.length) {
              that.downStatus = false;
            }
            res.visitedHistory.pageList.forEach((v) => {
              v.active = false;
            });
            this.upStatus = true;
            this.trigger = false;
            this.Recommend = this.Recommend.concat(res.visitedHistory.pageList);
            uni.stopPullDownRefresh();
          });
      } else if (this.tabChage == 2) {
        this.$myRequest
          .get("/api/mobile/vehicleOwner/getMyVisitedHistoryList", {
            pageSize: this.pageSize,
            pageNo: this.pageNo,
            userId: this.userInfo.id,
            businessType: 2,
            wetherShowCustomer: this.oneLevelTab == 1 ? "1" : "0",
          })
          .then((res) => {
            if (!res.visitedHistory.pageList.length) {
              that.downStatus = false;
            }
            res.visitedHistory.pageList.forEach((v) => {
              v.active = false;
            });
            this.upStatus = true;
            this.trigger = false;
            this.Recommend = this.Recommend.concat(res.visitedHistory.pageList);
            uni.stopPullDownRefresh();
          });
      } else {
        this.$myRequest
          .get("/mob/iteration/getMyHouseVisitedHistoryList", {
            pageSize: this.pageSize,
            pageNo: this.pageNo,
            userId: this.userInfo.id,
            businessType: 1,
            wetherShowCustomer: this.oneLevelTab == 1 ? "1" : "0",
          })
          .then((res) => {
            if (!res.visitedHistory.pageList.length) {
              that.downStatus = false;
            }
            res.visitedHistory.pageList.forEach((v) => {
              v.active = false;
            });
            this.upStatus = true;
            this.trigger = false;
            this.Recommend = this.Recommend.concat(res.visitedHistory.pageList);
            uni.stopPullDownRefresh();
          });
      }
    },
    down() {
      if (this.downStatus) {
        this.pageNo++;
        this.getFy();
      }
    },
    async up() {
      this.Recommend = [];
      this.pageNo = 1;
      this.downStatus = true;
      if (this.upStatus) {
        this.trigger = true;
        await this.getFy();
      }
    },
    zpdetails(item) {
      if (item.recruitmentType == 1) {
        uni.navigateTo({
          url: "/pages_recruitMoney/visited/fullTime?id=" + item.id,
        });
        return;
      } else {
        uni.navigateTo({
          url: "/pages_recruitMoney/visited/concurrently?id=" + item.id,
        });
        return;
      }
    },
    details(id) {
      if (this.tabChage == 2) {
        uni.navigateTo({
          url: "/pages_owner/index/doorSeen?id=" + id,
        });
      } else {
        uni.navigateTo({
          url: "/pages_houses/housing/optionsHaveSeen?id=" + id,
        });
      }
    },
    fanhui() {
      uni.navigateBack({
        delta: 1,
      });
    },
  },
};
</script>
<style lang="less" scoped>
/deep/ uni-switch,
uni-checkbox,
uni-radio {
  display: flex;
  align-items: center;
}
/deep/uni-checkbox .uni-checkbox-input {
  background-color: rgba(0, 0, 0, 0);
  border: 2rpx solid #999;
}
/deep/uni-radio:not([disabled]) .uni-radio-input:hover {
  border-color: #999;
}
/deep/uni-checkbox .wx-checkbox-input,
/deep/uni-checkbox .uni-checkbox-input {
  width: 48rpx;
  height: 48rpx;
}

/deep/ uni-checkbox::before {
  font-size: 40rpx;
  margin-top: -14rpx;
  right: 6rpx !important;
}
.box {
  width: 100%;
  min-height: 100vh;
  background-color: #fff;
}
.smkgSJTab {
  .oneLevel {
    height: 100rpx;
    box-shadow: 0px 1px 6rpx 1px rgba(201, 201, 201, 0.21);
    display: flex;
    .item {
      flex: 1;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-size: 32rpx;
      font-weight: 400;
      color: #333333;
      .image {
        width: 52rpx;
        height: 24rpx !important;
      }
    }
    .active {
      font-size: 32rpx;
      font-weight: 600;
      color: #64b6a8;
    }
  }
  .twoLevel {
    height: 100rpx;
    display: flex;
    align-items: center;
    .item {
      width: 130rpx;
      height: 54rpx;
      background-color: #fff;
      border-radius: 28rpx;
      font-size: 34rpx;
      font-weight: 400;
      color: #333333;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: 20rpx;
    }
    .active {
      background-color: #64b6a8;
      color: #fff;
    }
  }
}
.smkgTab {
  height: 100rpx;
  display: flex;
  align-items: center;
  justify-content: space-around;
  font-size: 34rpx;
  font-weight: 400;
  color: #333333;
  margin-bottom: 20rpx;
  border-bottom: 10rpx solid #e1e1e1;
  .active {
    font-size: 40rpx;
    color: #64b6a8;
  }
}
.heads {
  padding: 0 5%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 90%;
  /* #ifdef MP-WEIXIN */
  width: 70%;
  padding-right: 25%;
  /* #endif */
  .backs {
    width: 32rpx;
    height: 32rpx;
    bottom: 0 !important;
  }
  .toptitles {
    font-size: 18px;
    color: #fff;
    width: 300rpx;
    text-align: center;
  }
  .remove {
    width: 90rpx;
    height: 48rpx;
    border-radius: 6rpx;
    border: 1px solid #ffffff;
    text-align: center;
    line-height: 48rpx;
    color: #fff;
  }
}
.pos{
  height: 88rpx;
  box-sizing: content-box;
}
.tou {
  position: relative;
  width: 100%;
  text-align: center;
  /* #ifdef MP-WEIXIN */
  // text-align: left;
  display: flex;
  align-items: center;
  /* #endif */
  line-height: 88rpx;
  font-size: 36rpx;
  color: #fff;
  background-color: #64b6a8;
  .image1 {
    position: absolute;
    width: 32rpx;
    height: 32rpx;
    left: 30rpx;
  }
  .p2 {
    width: 90rpx;
    height: 48rpx;
    border-radius: 6rpx;
    border: 1px solid #ffffff;
    font-size: 26rpx;
    font-weight: 400;
    color: #ffffff;
    text-align: center;
    line-height: 48rpx;
    position: absolute;
    bottom: 20rpx !important;
    right: 30rpx;
    /* #ifdef MP-WEIXIN */
    position: initial;
    margin-left: auto;
    margin-right: 200rpx;
    bottom: 16rpx !important;
    /* #endif */
  }
}

.view {
  position: relative;
  font-size: 26rpx;
  border: 0;
  color: #333333;
  margin-right: 0;

  image {
    position: absolute;
    width: 44rpx;
    height: 24rpx;
    top: 66rpx;
    left: 50%;
    transform: translateX(-50%);
  }
}

.cur {
  color: #64b6a8;
  border: 0;
  transform: scale(1.1);
}

.down {
  height: 60rpx;
  line-height: 60rpx;
  text-align: center;
}

.none {
  text-align: center;

  image {
    width: 430rpx;
    margin-bottom: 16rpx;
  }

  view {
    height: 40rpx;
    line-height: 40rpx;
    color: #666;
  }
}
.list {
  margin-top: 30rpx;
  margin-left: 30rpx;
  margin-right: 30rpx;
  width: 690rpx;

  .tit {
    color: #333333;
    font-size: 36rpx;
    margin-bottom: 12rpx;
  }
  .vacancy {
    width: 100%;
    padding-bottom: 30rpx;
    margin-bottom: 30rpx;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    align-items: center;
    .vehicleRecom {
      font-size: 36rpx;
      font-weight: 600;
      color: #333333;
      line-height: 44rpx;
      word-break: break-all;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2; //想要的行数
      -webkit-box-orient: vertical;
      .tagLabel {
        vertical-align: top;
        background: #64b6a8;
        color: #fff;
        font-size: 24rpx;
        text-align: center;
        width: 106rpx;
        margin-right: 10rpx;
        padding: 2rpx 6rpx;
        border-radius: 4rpx;
      }
    }
    .vacancy_center {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 16rpx;
      .vacancy_status {
        span {
          font-size: 28rpx;
          font-weight: 400;
          color: #333333;
        }
        span:nth-child(1) {
          margin-right: 16rpx;
        }
      }
      .vacancy_price {
        font-size: 30rpx;
        font-weight: 550;
        color: #e00000;
      }
    }
    .vacancy_biaoq {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 16rpx;
      .vacancy_label {
        flex: 1;
        height: 48rpx;
        position: relative;
        overflow: hidden;
        white-space: nowrap;
        .shade {
          position: absolute;
          right: 0;
          top: 0;
          width: 100rpx;
          height: 48rpx;
          background: linear-gradient(
            to right,
            rgba(255, 255, 255, 0),
            rgba(255, 255, 255, 1)
          );
        }
        .label {
          display: inline-block;
          padding: 10rpx;
          background-color: #f0f0f0;
          margin-right: 10rpx;
          font-size: 24rpx;
          font-weight: 400;
          color: #333333;
          border-radius: 4rpx;
        }
        .label:nth-last-child(1) {
          margin-right: 0rpx;
        }
      }
      .gend {
        text-align: right;
        width: 80rpx;
        height: 100%;
        font-size: 24rpx;
        color: #888888;
      }
    }
    .personalInformation {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 28rpx;
      .personalInformation_left {
        display: flex;
        flex-direction: column;
        .personalInformation_image {
          width: 42rpx;
          height: 42rpx;
          border-radius: 42rpx;
          margin-right: 12rpx;
        }
        .GR {
          display: flex;
          align-items: center;
          .name {
            font-size: 24rpx;
            font-weight: 400;
            color: #333333;
          }
        }
        .GS {
          display: flex;
          align-items: center;
          .corporation {
            font-size: 24rpx;
            font-weight: 400;
            color: #333333;
          }
        }
      }
      .personalInformation_right {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        .personalInformation_Time {
          font-size: 24rpx;
          font-weight: 400;
          color: #888888;
          margin-bottom: 6rpx;
          text-align: right;
        }
        .personalInformation_distance {
          font-size: 24rpx;
          font-weight: 400;
          color: #888888;
          text-align: right;
        }
      }
    }
  }
  .liss {
    width: 96%;
    padding-bottom: 30rpx;
    margin-bottom: 30rpx;
    border-bottom: 2rpx solid #e0e0e0;
    display: flex;
    align-items: center;
    image {
      background-color: #f8f8f8;
      width: 300rpx;
      height: 200rpx;
      border-radius: 20rpx;
    }

    .li_1 {
      position: relative;
      display: inline-block;
      vertical-align: top;
      margin-left: 24rpx;

      .tit {
        font-size: 36rpx;
        line-height: 44rpx;
        font-weight: 600;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2; //想要的行数
        -webkit-box-orient: vertical;
        .tagLabel {
          vertical-align: top;
          background: #64b6a8;
          color: #fff;
          font-size: 24rpx;
          text-align: center;
          width: 106rpx;
          margin-right: 10rpx;
          padding: 4rpx 6rpx;
          border-radius: 4rpx;
        }
      }

      .neirong_1 {
        // width: 366rpx;
        font-size: 24rpx;
        color: #666666;
        display: flex;
        align-items: center;
        .price {
          color: red;
          font-size: 30rpx;
          font-weight: 600;
        }
        .neir_css {
          flex: 1;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 1; //想要的行数
          -webkit-box-orient: vertical;
        }
        .neir_css:nth-child(2n) {
          margin-left: 10rpx;
        }
        .neir_css:nth-child(2n-1) {
          margin-right: 10rpx;
        }
      }
    }
  }
  .li {
    width: 96%;
    padding-bottom: 30rpx;
    margin-bottom: 30rpx;
    border-bottom: 2rpx solid #e0e0e0;
    display: flex;
    justify-content: space-between;

    .xian {
      position: absolute;
      height: 2rpx;
      background-color: #e0e0e0;
      bottom: 0;
      right: 0;
    }

    .img3 {
      background-color: #f8f8f8;
      width: 300rpx;
      height: 200rpx;
      border-radius: 20rpx;
    }

    .li_2 {
      margin-left: 24rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .vehicleRecom {
        font-size: 32rpx;
        font-weight: 600;
        color: #333333;
        line-height: 44rpx;

        .tagLabel {
          vertical-align: top;
          background: #64b6a8;
          color: #fff;
          font-size: 24rpx;
          text-align: center;
          width: 106rpx;
          margin-right: 10rpx;
          padding: 4rpx 6rpx;
          border-radius: 4rpx;
        }
      }

      .price {
        font-size: 28rpx;
        font-weight: 600;
        color: #e00000;
      }
    }
  }

  .liss:last-child {
    border-bottom: 0rpx solid #e0e0e0;
  }
}
.bot {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 120rpx;
  background-color: #fff;
  box-shadow: 0rpx 0rpx 6rpx 1rpx rgba(0, 0, 0, 0.16);
  z-index: 9;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .bot_qx {
    margin-left: 30rpx;
    display: flex;
    align-items: center;
    text {
      font-size: 32rpx;
      font-weight: 400;
      color: #333333;
      margin-left: 10rpx;
    }
  }
  .bot_sc {
    margin-right: 30rpx;
    width: 200rpx;
    height: 70rpx;
    background-color: #64b6a8;
    text-align: center;
    line-height: 70rpx;
    color: #fff;
    font-size: 32rpx;
    border-radius: 35rpx;
  }
}
.zbc {
  position: fixed;
  width: 100%;
  top: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.3);
  .shangjia {
    position: absolute;
    width: 600rpx;
    height: 300rpx;
    background-color: #fff;
    border-radius: 10rpx;
    top: 30%;
    left: 50%;
    transform: translateX(-50%);

    .li_1 {
      width: 100%;
      font-size: 34rpx;
      font-weight: 600;
      margin-left: 114rpx;
      margin-top: 80rpx;
    }

    .li_2 {
      display: inline-block;
      vertical-align: top;
      width: 160rpx;
      height: 60rpx;
      background: #ffffff;
      border: 2rpx solid #64b6a8;
      border-radius: 37rpx;
      text-align: center;
      line-height: 60rpx;
      color: #64b6a8;
      margin-top: 58rpx;
      margin-left: 118rpx;
    }

    .li_3 {
      display: inline-block;
      vertical-align: top;
      width: 160rpx;
      height: 60rpx;
      background: #64b6a8;
      border-radius: 37rpx;
      text-align: center;
      line-height: 60rpx;
      color: #fff;
      margin-top: 58rpx;
      margin-left: 46rpx;
    }
  }
}
	.fixed {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 40;
    box-sizing: border-box;
	}

</style>
